<template>
  <a-modal
    :visible="visible"
    title="内容详情"
    width="70%"
    @cancel="close"
    @ok="handleOk">
    <a-row type="flex" style="flex-wrap:nowrap" :gutter="16">
      <a-col flex="380px" style="background-color: #DCE1E8;padding: 20px 10px;overflow: auto;">
        <preview-content :info="activityInfo"></preview-content>
      </a-col>
      <a-col flex="auto">
        <a-tabs>
          <a-tab-pane key="1" tab="任务信息">
            <task-base-info :params="{taskNo:activityInfo.taskId}"></task-base-info>
          </a-tab-pane>
          <a-tab-pane key="2" tab="活动信息">
            <activity-content-form :disabled="true" :params="{taskNo:activityInfo.taskId}"></activity-content-form>
          </a-tab-pane>
          <a-tab-pane key="3" tab="任务流转">
            <task-flow :params="{taskNo:activityInfo.taskId}"></task-flow>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
  import PreviewContent from "./PreviewContent";
  import TaskBaseInfo from "../TaskBaseInfo";
  import ActivityContentForm from "../content/ActivityContentForm";
  import TaskFlow from "../TaskFlow";

  export default {
    name: "PreviewWithActivityInfo",
    components: {TaskFlow, ActivityContentForm, TaskBaseInfo, PreviewContent},
    props: ['visible', 'activityInfo'],
    data() {
      return {}
    },
    methods: {
      close() {
        this.$emit('update:visible', false);
      },
      handleOk() {
        this.close();
      }
    }
  }
</script>

<style scoped>

</style>